<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档加载</title>
    <!-- <script type="text/javascript">
        /*
            onload事件会在整个页面加载完成之后触发
            为window绑定一个onload事件
                该事件对应的响应函数将会在页面加载完成之后执行，
                这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
        */
        
        // window.onload = function(){
        //     alert("hello");
        // };
    </script> -->
</head>
<body>
    <button id="btn">一个按钮</button>
</body>
</html>
<script type="text/javascript">
    /*
        浏览器在加载一个页面时，是按照自上向下的顺序加载的
            读取到一行就运行一行，如果将script标签写在页面的上边，
            在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
            会导致无法获取到DOM对象

    */
    /*
        将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
    */

    // 获取id为btn的按钮
    var btn = document.getElementById("btn");

    btn.onclick = function(){
        alert("hello");
    };

</script>